<template>
    <div class="tabbar">
        <div class="item" v-for="item in content" :key="item.id" @click="handleTabClick(item.id)">
            <div class="icon" :style="`--icon: url(${ base_url }${ active == item.id ? item.selected : item.icon }); --icon-size: ${ item.size }`"></div>
            <div class="text">{{ item.text }}</div>
        </div>
    </div>
</template>

<script setup>
import { base_url } from '@/server/config';
import { ref } from 'vue';

// 定义外部传递进来的数据
const props = defineProps({
    active: { type: Number, default: 1 }
});

// 定义 emit 事件
const emit = defineEmits([ 'tabChange' ]);

// 处理 tab 点击事件
const handleTabClick = (id) => {
    // 或者使用 tabChange 事件
    emit('tabChange', id);
};

let content = ref([
    {
        id: 1,
        text: '音乐',
        icon: '/static/icon/main.svg',
        selected: '/static/icon/main_selected.svg',
        size: '100%',
    }, {
        id: 2,
        text: '我的',
        icon: '/static/icon/home.svg',
        selected: '/static/icon/home_selected.svg',
        size: '70%',
    }
]);
</script>

<style scoped lang="less">
.tabbar {
    width: 100vw;
    height: 15vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--tabbar-bg-color);
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    // touch-action: none;

    .item {
        flex: 1;
        height: 100%;
    }

    .icon {
        --size: 8vw;
        width: var(--size);
        height: var(--size);
        margin: 0 auto;
    }

    .text {
        font-size: 4vw;
        text-align: center;
    }
}
</style>
